<template>
  <!--popup选择框-->
  <div>
    <BasicModal
      v-bind="$attrs"
      @register="register"
      :title="title"
      :width="1200"
      @ok="handleSubmit"
      @cancel="handleCancel"
      cancelText="关闭"
      wrapClassName="j-popup-modal"
      @visible-change="visibleChange"
    >
      <div class="jeecg-basic-table-form-container" v-if="showSearchFlag">
        <a-form
          ref="formRef"
          :model="queryParam"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          @keyup.enter.native="searchQuery"
        >
          <a-row :gutter="24">
            <template v-for="(item, index) in queryInfo">
              <template v-if="item.hidden === '1'">
                <a-col
                  :md="8"
                  :sm="24"
                  :key="'query' + index"
                  v-show="toggleSearchStatus"
                >
                  <SearchFormItem
                    :formElRef="formRef"
                    :queryParam="queryParam"
                    :item="item"
                    :dictOptions="dictOptions"
                  ></SearchFormItem>
                </a-col>
              </template>
              <template v-else>
                <a-col :md="8" :sm="24" :key="'query' + index">
                  <SearchFormItem
                    :formElRef="formRef"
                    :queryParam="queryParam"
                    :item="item"
                    :dictOptions="dictOptions"
                  ></SearchFormItem>
                </a-col>
              </template>
            </template>

            <a-col :md="8" :sm="8">
              <span
                style="float: left; overflow: hidden"
                class="table-page-search-submitButtons"
              >
                <a-col :lg="6">
                  <a-button
                    type="primary"
                    preIcon="ant-design:reload-outlined"
                    @click="searchReset"
                    >重置</a-button
                  >
                  <a-button
                    type="primary"
                    preIcon="ant-design:search-outlined"
                    @click="searchQuery"
                    style="margin-left: 8px"
                    >查询</a-button
                  >
                  <a @click="handleToggleSearch" style="margin-left: 8px">
                    {{ toggleSearchStatus ? "收起" : "展开" }}
                    <Icon
                      :icon="
                        toggleSearchStatus
                          ? 'ant-design:up-outlined'
                          : 'ant-design:down-outlined'
                      "
                    />
                  </a>
                </a-col>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <BasicTable
        ref="tableRef"
        :canResize="false"
        :bordered="true"
        :loading="loading"
        :rowKey="combineRowKey"
        :columns="columns"
        :showIndexColumn="false"
        :dataSource="dataSource"
        :pagination="pagination"
        :rowSelection="rowSelection"
        @row-click="clickThenCheck"
        @change="handleChangeInTable"
      >
        <template #tableTitle></template>
      </BasicTable>
    </BasicModal>
  </div>
</template>

<script lang="ts">
import { defineComponent, unref, ref, watch, watchEffect, reactive, computed } from "vue";
import { BasicModal, useModalInner } from "/@/components/Modal";
import { createAsyncComponent } from "/@/utils/factory/createAsyncComponent";
import { useAttrs } from "/@/hooks/core/useAttrs";
import { usePopBiz } from "/@/components/jeecg/OnLine/hooks/usePopBiz";
import { useMessage } from "/@/hooks/web/useMessage";

export default defineComponent({
  name: "JPopupOnlReportModal",
  components: {
    //此处需要异步加载BasicTable
    BasicModal,
    SearchFormItem: createAsyncComponent(
      () => import("/@/components/jeecg/OnLine/SearchFormItem.vue"),
      { loading: false }
    ),
    BasicTable: createAsyncComponent(
      () => import("/@/components/Table/src/BasicTable.vue"),
      {
        loading: true,
      }
    ),
  },
  props: ["multi", "code", "sorter", "groupId", "param"],
  emits: ["ok", "register"],
  setup(props, { emit, refs }) {
    const { createMessage } = useMessage();
    const labelCol = reactive({
      xs: { span: 24 },
      sm: { span: 6 },
    });
    const wrapperCol = reactive({
      xs: { span: 24 },
      sm: { span: 18 },
    });
    //注册弹框
    const [register, { closeModal }] = useModalInner();
    const formRef = ref();
    const tableRef = ref();
    const toggleSearchStatus = ref(false);
    const attrs = useAttrs();
    const tableScroll = ref({ x: true });
    const getBindValue = Object.assign({}, unref(props), unref(attrs));
    const [
      {
        visibleChange,
        loadColumnsInfo,
        dynamicParamHandler,
        loadData,
        handleChangeInTable,
        combineRowKey,
        clickThenCheck,
        filterUnuseSelect,
        getOkSelectRows,
      },
      {
        visible,
        rowSelection,
        checkedKeys,
        selectRows,
        pagination,
        dataSource,
        columns,
        loading,
        title,
        iSorter,
        queryInfo,
        queryParam,
        dictOptions,
      },
    ] = usePopBiz(getBindValue, tableRef);

    const showSearchFlag = computed(
      () => unref(queryInfo) && unref(queryInfo).length > 0
    );
    /**
     *监听code
     */
    watch(
      () => props.code,
      () => {
        loadColumnsInfo();
      }
    );
    /**
     *监听popup动态参数 支持系统变量语法
     */
    watch(
      () => props.param,
      () => {
        if (visible) {
          dynamicParamHandler();
          loadData();
        }
      }
    );
    /**
     *监听sorter排序字段
     */
    watchEffect(() => {
      if (props.sorter) {
        let arr = props.sorter.split("=");
        if (arr.length === 2 && ["asc", "desc"].includes(arr[1].toLowerCase())) {
          iSorter.value = { column: arr[0], order: arr[1].toLowerCase() };
          // 排序字段受控
          unref(columns).forEach((col) => {
            if (col.dataIndex === unref(iSorter).column) {
              col["sortOrder"] = unref(iSorter).order === "asc" ? "Asc" : "descend";
            } else {
              col["sortOrder"] = false;
            }
          });
        } else {
          console.warn("【JPopup】sorter参数不合法");
        }
      }
    });

    //update-begin-author:taoyan date:2022-5-31 for: VUEN-1156 popup 多数据有分页时，选中其他页，关闭popup 再点开，分页仍然选中上一次点击的分页，但数据是第一页的数据 未刷新
    watch(
      () => pagination.current,
      (current) => {
        if (current) {
          tableRef.value.setPagination({
            current: current,
          });
        }
      }
    );
    //update-end-author:taoyan date:2022-5-31 for: VUEN-1156 popup 多数据有分页时，选中其他页，关闭popup 再点开，分页仍然选中上一次点击的分页，但数据是第一页的数据 未刷新

    function handleToggleSearch() {
      toggleSearchStatus.value = !unref(toggleSearchStatus);
    }
    /**
     * 取消/关闭
     */
    function handleCancel() {
      closeModal();
      checkedKeys.value = [];
      selectRows.value = [];
    }

    /**
     *确认提交
     */
    function handleSubmit() {
      filterUnuseSelect();
      if (!props.multi && unref(selectRows) && unref(selectRows).length > 1) {
        createMessage.warning("只能选择一条记录");
        return false;
      }
      if (!unref(selectRows) || unref(selectRows).length == 0) {
        createMessage.warning("至少选择一条记录");
        return false;
      }
      //update-begin-author:taoyan date:2022-5-31 for: VUEN-1155 popup 选择数据时，会选择多条重复数据
      let rows = getOkSelectRows!();
      emit("ok", rows);
      //update-end-author:taoyan date:2022-5-31 for: VUEN-1155 popup 选择数据时，会选择多条重复数据
      handleCancel();
    }

    /**
     * 查询
     */
    function searchQuery() {
      loadData(1);
    }
    /**
     * 重置
     */
    function searchReset() {
      queryParam.value = {};
      loadData(1);
    }
    return {
      attrs,
      register,
      tableScroll,
      dataSource,
      pagination,
      columns,
      rowSelection,
      checkedKeys,
      loading,
      title,
      handleCancel,
      handleSubmit,
      clickThenCheck,
      loadData,
      combineRowKey,
      handleChangeInTable,
      visibleChange,
      queryInfo,
      queryParam,
      tableRef,
      formRef,
      labelCol,
      wrapperCol,
      dictOptions,
      showSearchFlag,
      toggleSearchStatus,
      handleToggleSearch,
      searchQuery,
      searchReset,
    };
  },
});
</script>

<style lang="less" scoped>
.jeecg-basic-table-form-container {
  padding: 5px;

  .table-page-search-submitButtons {
    display: block;
    margin-bottom: 0;
    white-space: nowrap;
  }
}
:deep .jeecg-basic-table .ant-table-wrapper .ant-table-title {
  min-height: 0;
}
</style>
